// export default function () {
//     return (<div>小满</div>)
// }


//返回一个渲染函数l / optionsAPi
import { defineComponent, ref } from 'vue'
export default defineComponent({
    setup() {
        const flag = ref(false)
        return () => (<div v-show={flag.value}>小满setup</div>)
    }

})

// v-model
let v = ref<string>('')
const renderDom = () => {
    return (
        <>
            <input v-model={v.value} type="text" />
            <div>
                {v.value}
            </div>
        </>
    )
}

// v-if 不能用需变更
let flag = ref(false)
const renderDom1 = () => {
    return (
        <>
            {
                flag.value ? <div>景天</div> : <div>雪见</div>
            }
        </>
    )
}

//v-for 需变更
let arr = [1, 2, 3, 4, 5]
const renderDom2 = () => {
    return (
        <>
            {
                arr.map(v => {
                    return <div>${v}</div>
                })
            }
        </>
    )
}

//v-bind
let arr3 = [1, 2, 3, 4, 5]
const renderDom3 = () => {
    return (
        <>
            <div data-arr={arr3}>1</div>
        </>
    )
}

// v-on绑定事件 所有的事件都按照react风格来
// 所有事件有on开头
// 所有事件名称首字母大写
const renderDom4 = () => {
    return (
        <>
            <button onClick={clickTap}>点击</button>
        </>
    )
}
const clickTap = () => {
    console.log('click');
}

// Props 接受值
type Props = {
    title: string
}
const renderDom5 = (props: Props) => {
    return (
        <>
            <div>{props.title}</div>
            <button onClick={clickTap}>点击</button>
        </>
    )
}

// Emit派发
const renderDom6 = (props: Props, content: any) => {
    return (
        <>
            <div>{props.title}</div>
            <button onClick={clickTap.bind(this, content)}>点击</button>
        </>
    )
}


const A = (props, { slots }) => (
    <>
      <h1>{ slots.default ? slots.default() : '未找到slots' }</h1>
      <h2>{ slots.bar?.() }</h2>
    </>
  );
   
  const App1 = {
    setup() {
      const slots = {
        bar: () => <span>B</span>,
      };
      return () => (
        <A v-slots={slots}>
          <div>A</div>
        </A>
      );
    },
  };
   
  // or
   
  const App2 = {
    setup() {
      const slots = {
        default: () => <div>A</div>,
        bar: () => <span>B</span>,
      };
      return () => <A v-slots={slots} />;
    },
  };
   
  // or you can use object slots when `enableObjectSlots` is not false.
  const App3 = {
    setup() {
      return () => (
        <>
          <A>
            {{
              default: () => <div>A</div>,
              bar: () => <span>B</span>,
            }}
          </A>
          <B>{() => "foo"}</B>
        </>
      );
    },
  };